<template>
	<view class="supply-all-page">
		<!-- 招标信息 -->
		<view class="active-list">


			<view class="active-title active-tt">
				<view class="active-top">
					可供货地区<text class="">*</text>
				</view>
				<u--textarea placeholder="点击选择您的公司所在地(必填)" autoHeight @focus="areaFocus" v-model="areaVal" border="none"
					></u--textarea>
			</view>

			<view class="active-title">
				<view class="active-top">
					服务
				</view>
				<u--textarea @focus="serverFocus" v-model="serverVal" placeholder="点击选择服务(可多选)" border="none"
					></u--textarea>
			</view>

			<view class="active-title describe-title">
				<view class="active-top">
					主营业务<text class="">*</text>
				</view>
				<u--textarea placeholder="简单介绍公司经营的主体项目或主营业务"  v-model="productDescribe" border="none"
					maxlength="100" count="true"></u--textarea>
			</view>

			<!-- v-for="(item,index) in productArr" :key="index" -->
			<view class="active-title" >
				<view class="active-top">
					供应产品<text class="">*</text>(<text>{{productArrNum}}</text>/30)
				</view>
				<u--textarea v-if="!productListsShow" placeholder="点击添加供应产品" @focus="proFocus" v-model="companyName" border="none" maxlength="10" count="true"></u--textarea>

				<view class="pro-info-box" v-if="productListsShow" v-for="(item,index) in productArr" :key="index">
					<img class="pro-close" @click="deletePro(item,index)" src="https://file.casugn.com/storecompcard//oovODq3TnlkM9713e815484d918f77a3204451855016_1661411923642.png" alt="">
					<view class="pro-img">
						<img :src="item.imageList" alt="">
					</view>
					<view class="pro-content">
						<view class="pro-name">
							{{item.name}}
						</view>
						<view class="pro-sec">
							<text class="pro-sec1">￥{{item.price}}</text>
							<text class="pro-sec2">{{item.region}}</text>
						</view>
						<view class="pro-kg">
							产品规格：<text>{{item.specs}}</text>
						</view>
					</view>
				</view>
				<view class="contain-add" v-if="containAddShow">
					<img @click="proFocus" src="https://file.casugn.com/storecompcard//JYsOvvFKxthd32c473bc40d7db18b9b08b0a2a5231c5_1661568060212.png" alt="">
					<text @click="proFocus">继续添加供应产品</text>
				</view>
			</view>

			<view class="sign-up">
				<u-button type="primary" shape="circle" color="#2684ff" text="完成" @click="nextStep(item,index)">
				</u-button>
			</view>

		</view>
		<!-- 职位选择 -->
		<u-popup :show="positionShow" @close="positionClose" >
			<view class="positon-box">
				<view class="pos-title">
					职位
				</view>
				<view class="pos-input">
					 <u--input
					    placeholder="手动填写您的职位(2-10个字)"
					    border="surround"
					    v-model="postionValue"
					    @change="postionChange"
						clearable
					  ></u--input>
				</view>
				<view class="pos-subtitle">
					快速选择
				</view>
				<view class="pos-select">
					<view :class="positionActiveIndex==index?'pos-select-active-box':'pos-select-box'" v-for="(item,index) in postionLists" @click="postionClick(item,index)" :key="index">
						{{item}}
					</view>
				</view>


			</view>
			<view class="pos-button">
				<view class="pos-button-cancel"  @click="posCancel">
					取消
				</view>
				<view class="pos-button-confirm" @click="posConfirm">
					确认
				</view>
			</view>

		</u-popup>
		<!-- 公司所在地 -->
		<!-- <u-overlay :show="areaShow" :duration="400" :z-index ="999" :opacity="1">
			<view class="area-box">

			</view>
		</u-overlay> -->
		<areaPage class="area-page" @areaSelectName="areaSelectName" v-if="areaShow"></areaPage>
		<!-- @serverSelectName="serverSelectName" -->
		<serverPage class="server-page"  @serverSelectName="serverSelectName"  v-if="serverShow"></serverPage>
		<!-- @serverSelectName="productSelectName" -->
		<productPage class="product-page" @productShowMethod="productShowMethod"   v-if="productShow"></productPage>
	</view>
</template>

<script>

	import baseConfig from '@/config/baseUrl.js'
	import areaPage from '@/pagesBusiness/supplyAllArea/supplyAllArea.vue'
	import serverPage from '@/pagesBusiness/supplyServer/supplyServer.vue'
	import productPage from '@/pagesBusiness/supplyProduct/supplyProduct.vue'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components:{
			areaPage,
			serverPage,
			productPage
		},
		data() {
			return {

				blurProNullShow: false, //姓名输入信息为空失焦显示
				productName: '', //姓名输入信息
				blurProNumNullShow: false, //联系电话输入信息为空失焦显示
				productNum: '', //联系电话输入信息
				blurProNameNullShow:false,//公司名称输入信息为空失焦显示
				companyName:'',//公司名称
				customStyle0: {
					marginBottom: '8px',
					fontSize: '32px',
					marginLeft: '0'
				},
				customStyle1: {
					marginBottom: '8px',
					fontSize: '32px',
					marginLeft: '15px'
				},
				productDescribe:'',

				position:'',//职位
				positionShow:false,//职位隐藏
				postionLists:["企业负责人","总经理","个体工商户","业务总监","销售总监","市场总监","业务经理","销售经理","市场经理","销售/业务员","项目经理","工程师"],
				postionValue:'',//职位
				positionActiveIndex:-1,
				areaShow:false,//公司所在地弹窗
				areaVal:'',//公司所在地
				serverShow:false,//服务弹窗
				serverVal:'',//服务的值
				productShow:false,//产品弹窗
				supplyInfo:{},
				productInfo:{},//产品信息
				productListsShow:false,
				productArr:[],
				productArrNum:0,
				containAddShow:false,

				productShow:false,
				openId:'',
				needId:'',
				historyInfo:{}
			}
		},
		onLoad(e) {
			console.log(e)
			let openId = uni.getStorageSync('openId')
			console.log("openId", openId)
			this.openId=openId.openid
			if(e.supplyInputInfo){
					let supInfo=JSON.parse(e.supplyInputInfo)
					this.areaVal=supInfo.areaVal
					this.serverVal=supInfo.serverVal
					this.productDescribe=supInfo.productDescribe
			}
			// this.querySupplyDefaultInfo()

			// this.querySupplyDefaultInfo()

		},
		// computed: {
		// 	...mapGetters(['supplyProductArr'])
		// },
		onShow() {

			this.historyInfo =JSON.parse(uni.getStorageSync(`setSupplyInfo`))
			console.log('打印')
			console.log(this.historyInfo)
			this.productArr=[]
			this.getDefaultArr()
			// 1是从信息填写页面跳转，2是从添加产品页面跳转
			// let jumpInfo=uni.getStorageSync(`jumpToInfo`)

			// if(jumpInfo==1){
			// 	if(this.historyInfo){

			// 		this.productDescribe=this.historyInfo.business

			// 		this.areaVal=this.historyInfo.region

			// 		this.serverVal=this.historyInfo.service

			// 		this.productArr=this.historyInfo.productList
			// 		this.productArrNum=this.historyInfo.productList.length
			// 		if(this.productArrNum==0){
			// 			this.productListsShow=false
			// 			this.containAddShow=false

			// 		}else{
			// 			this.productListsShow=true
			// 			this.containAddShow=true
			// 		}
			// 		uni.setStorageSync(`supplyProductArr`, this.productArr)

			// 	}else{
			// 		this.productArr = []
			// 		uni.setStorageSync(`supplyProductArr`,this.productArr)
			// 		this.productListsShow=false
			// 		this.productArrNum=0
			// 		this.containAddShow=false
			// 		this.areaVal=''
			// 		this.serverVal=''
			// 		this.productDescribe=''
			// 	}

			// 	uni.setStorageSync(`supplyProductArr`, this.productArr)
			// }else{
			// 	let info =JSON.parse(uni.getStorageSync(`supplyInputInfo`))
			// 	this.areaVal=info.areaVal
			// 	this.serverVal=info.serverVal
			// 	this.productDescribe=info.productDescribe
			// 	this.getDefaultArr()
			// }


			// this.userInfo = uni.getStorageSync('_userInfo')
			// console.log(this.userInfo)
			// let openId = uni.getStorageSync('openId')
			// console.log("openId", openId)
			// this.openId=openId.openid








		},
		methods: {

			querySupplyDefaultInfo(){
				this.$api.querySupplyDefault(this.openId).then(res=>{
					if(res.success){
						console.log(res.result)
						this.supplyInfo=res.result
						this.needId=res.result.id
						this.productDescribe=res.result.business==null?'':res.result.business

						this.areaVal=res.result.region==null?'':res.result.region

						this.serverVal=res.result.service==null?'':res.result.service

						this.productArr=res.result.productList==null?[]:res.result.productList
						this.productArrNum=res.result.productList.length
						if(this.productArrNum==0){
							this.productListsShow=false
							this.containAddShow=false

						}else{
							this.productListsShow=true
							this.containAddShow=true
						}
					}
				})
			},

			getDefaultArr(){
				console.log(uni.getStorageSync(`supplyProductArr`))
				this.supplyInfo = this.$store.state.supplyInfo
				console.log(this.supplyInfo)
				this.queryProductLists()
				this.productInfo = this.$store.state.productInfo
				// console.log("供应产品信息")
				// console.log(this.productInfo)
				// this.productArr = uni.getStorageSync(`supplyProductArr`)
				// console.log("供应产品")
				// console.log("供应产品信息")
				// console.log(this.productArr)

				if(this.productArr.length==0){
					this.productListsShow=false
					this.productArrNum=0
					this.containAddShow=false
				}else{

					this.productListsShow=true
					this.containAddShow=true
					this.productArrNum=this.productArr.length
					if(this.productArr.length==30){
						this.containAddShow=false
					}
				}
			},
			// productShowMethod(val){
			// 	console.log("产品传值")
			// 	console.log(val)
			// 	this.productShow=val
			// 	this.getDefaultArr()
			// },
			queryProductLists(){
				this.$api.querySupplyNewProductLists(this.supplyInfo.needId).then(res => {
					console.log("xin")
					console.log(res)
					if(res.success){
						this.productArr=res.result
						this.productArrNum=res.result.length
						// res.result.total=0
						if(this.productArrNum>0){
							this.productListsShow=true
							this.containAddShow=true
						}else{
							this.productListsShow=false
							this.containAddShow=false
						}
					}
				})
			},
			// 姓名失焦
			proBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNullShow = false
				} else {
					this.blurProNullShow = true
				}
			},
			// 手机号失焦
			proNumBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNumNullShow = false
				} else {
					this.blurProNumNullShow = true
				}
			},
			// 公司名称失焦
			proNameBlur(e){
				// onsole.log(e)
				if (e) {
					this.blurProNameNullShow = false
				} else {
					this.blurProNameNullShow = true
				}
			},
			// 职位聚焦事件
			positionFocus(){
				this.positionShow=true
			},
			// 职位弹窗关闭事件
			positionClose(){
				this.positionShow=false
			},

			postionChange(val){
				console.log(val)
			},
			// 职位点击
			postionClick(item,index){
				console.log(item,index)
				this.positionActiveIndex=index
				this.postionValue=item
				let obj=this.postionLists.find(ele=>{
					return ele==item
				})
				console.log(obj)
			},
			// 职位取消选择
			posCancel(){
				this.positionActiveIndex=-1
				this.postionValue=''
				this.positionShow=false
			},
			// 职位确认选择
			posConfirm(){
				if(this.postionValue==''){
					uni.showToast({
						title: "请选择或者填写职位",
						icon: 'none'
					});
					return false
				}
				this.position=this.postionValue
				this.positionShow=false

			},



			// 新的


			// 公司所在地聚焦
			areaFocus(){
				this.areaShow=true
				this.serverShow=false
				this.productShow=false
				uni.hideKeyboard()
				// uni.navigateTo({
				// 	url: '/pagesBusiness/supply/supplyArea'
				// })
			},
			areaSelectName(val){
				console.log("子传父")
				console.log(val)
				this.areaVal=val.toString()
				this.areaShow=false
			},
			// 服务
			serverFocus(){
				this.serverShow=true
				this.areaShow=false
				this.productShow=false
				uni.hideKeyboard()
			},
			serverSelectName(val){
				console.log(val)
				let arr=[]
				arr.push(val[0],val[1],val[2])
				this.serverVal=arr.toString()
				this.serverShow=false
			},
			// 产品
			proFocus(){
				// this.productShow=true
				uni.hideKeyboard()
				let info={
					areaVal:this.areaVal,
					serverVal:this.serverVal,
					productDescribe:this.productDescribe
				}
				uni.setStorageSync(`supplyInputInfo`, JSON.stringify(info))
				// uni.setStorageSync(`supplyProductNeedId`, JSON.stringify(info))
				uni.navigateTo({
					url: '/pagesBusiness/supplyProduct/supplyProduct?needId='+this.historyInfo.needId+'&submitInfo='+JSON.stringify(info)
				})
			},
			// 删除供应产品
			deletePro(item,index){
				console.log(item)

				this.$api.deleteSupplyProduct(item.id).then(res => {
					console.log(res)
					if(res.success){
						this.getDefaultArr()
						// console.log("删除前")
						// console.log(this.productArr)
						// this.productArr.splice(this.productArr.findIndex(obj => obj === item), 1)
						// console.log("删除后")
						// console.log(this.productArr)
						// uni.setStorageSync(`supplyProductArr`, this.productArr)
						// if(this.productArr.length==0){
						// 	this.productListsShow=false
						// 	this.productArrNum=0
						// 	this.containAddShow=false
						// }
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},

			// 提交
			nextStep(item, index) {

				console.log(this.historyInfo)
				if (this.areaVal == "") {
					uni.showToast({
						title: "可供货地区不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.productDescribe == "") {
					uni.showToast({
						title: "主营业务不能为空",
						icon: 'none'
					});
					return false
				}
				// if (this.companyName == "") {
				// 	uni.showToast({
				// 		title: "供应产品不能为空",
				// 		icon: 'none'
				// 	});
				// 	return false
				// }
				let idArr=[]
				this.productArr.forEach(item=>{
					idArr.push(item.id)
				})

				let data = {
					userName: this.historyInfo.name,
					userTel: this.historyInfo.phone,
					userPosition: this.historyInfo.position,
					name: this.historyInfo.companyName,
					city: this.historyInfo.areaVal,
					perfile: this.historyInfo.describe,
					region:this.areaVal,
					service:this.serverVal,
					business:this.productDescribe,
					productIds:idArr.toString(),
					openId:this.openId,
					id:this.historyInfo.needId,
				}
				console.log(data)

				this.$api.supplyNewSubmit(data).then(res => {
					console.log(res)
					if(res.success){
						uni.setStorageSync(`supplyJumpTo`, 1)
						uni.setStorageSync(`supplyInputInfo`, '')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesBusiness/circleIndex/circleIndex'
							})
						}, 1000)
					}
				})


				// uni.navigateTo({
				// 	url: '/pagesBusiness/circleList/circleList'
				// })

			}
		}
	}
</script>

<style lang="scss" scoped>
	.supply-all-page{
		background: red;
		position: relative;
		height: 100%;
		width: 100%;
		padding: 41upx 30upx 100upx;
	}
	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #f6f6f6;
		z-index: 10;

		// position: relative;
		// height: 100vh;

		.active-title {
			letter-spacing: 3upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			border-bottom: 1px solid #f6f6f6;
			margin-top: 20upx;

			.active-top {
				font-size: 26upx;
				font-weight: bold;

				text {
					color: red;
					margin-left: 5upx;
				}
			}

			.buy-many {
				font-size: 22upx;
				color: #2979ff;
				padding-bottom: 10upx;
			}

			::v-deep .u-radio-group {
				margin-top: 20upx;
				margin-bottom: 20upx;
			}

			::v-deep .u-textarea {
				margin-top: 25upx;
				display: flex;
				justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size:30upx;

			}

			::v-deep .u-textarea__count {
				position: relative;
			}
			.pro-info-box{
				display: flex;
				position: relative;
				z-index: 20;
				margin-top: 20upx;
				padding-bottom: 20upx;
				.pro-close{
					position: absolute;
					width: 50upx;
					height: 50upx;
					left: 0;
					top: 0;
				}
				.pro-img{
					margin-top: 8upx;
					width: 150upx;
					height: 150upx;
					img{
						width: 150upx;
						height: 150upx;
					}
				}
				.pro-content{
					margin-left: 30upx;
					font-size: 30upx;
					line-height: 50upx;
					.pro-name{
						font-weight: 600;
						margin-top: 10upx;
					}
					.pro-sec{
						.pro-sec1{
							color: #ff8d07;
							font-weight: 600;
						}
						.pro-sec2{
							color: #5f5b4f;
							margin-left: 20upx;
						}
					}
					.pro-kg{
						color: #999c95;
					}
				}
			}

			.contain-add{
				margin-top: 30upx;
				text-align: center;
				padding-bottom: 20upx;
				img{
					width: 50upx;
					height: 50upx;
					vertical-align: middle;
				}
				text{
					margin-left: 5upx;
					color: #2979ff;
				}
			}

		}

		.active-tt{
			::v-deep .u-textarea {
				margin-top: 25upx;
				display: flex;
				justify-content: space-between;
				padding: 0;
				padding-bottom: 20upx;
				// height: 60upx;
				font-size:30upx;
			}

		}

		.describe-title{

			::v-deep .u-textarea {
				margin-top: 25upx;
				// display: flex;
				display: block;
				// justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size:30upx;
			}
			::v-deep .u-textarea__count {
				position: relative;
				display: block;
				text-align: right;
				margin-top: 10upx;
			}
		}
		.active-info {
			border-bottom: 1upx solid #EEEEEE;
			// padding: 37upx 0;
			.active-img-des{
				font-size: 24upx;
				color: rgb(153, 153, 153);
				margin-top: 20upx;
			}
			.active-info-img {
				margin: 0 auto;
				// margin-top: 30upx;
				// width: 690upx;
				// height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;
				margin-top: 20upx;

				// border-bottom: 1upx solid #EEEEEE;
				// img {
				// 	width: 690upx;
				// 	height: 350upx;
				// }

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}


		.sign-up {
			margin-top: 120upx;
		}

		::v-deep .u-upload__deletable {
			right: 20upx;
			top: 20upx;
			width: 20upx;
			height: 20upx;
			text-align: center;
			border-bottom-left-radius: 0;

			// background: transparent;
			.u-icon--right {
				text {
					font-size: 30upx !important;
					top: 7upx !important;
					left: 6upx !important;
				}
			}
		}

	}
	.positon-box{
		padding: 20upx;
		.pos-title{
			margin-top: 10upx;
			font-weight: bold;
		}
		.pos-input{
			margin-top: 20upx;
		}
		.pos-subtitle{
			margin-top: 20upx;
			font-weight: bold;
			color: #666666;
		}
		.pos-select{
			margin-top: 20upx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.pos-select-box{
				width: 200upx;
				background: #f5f5f5;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
				border-radius: 10upx;
			}
			.pos-select-active-box{
				width: 200upx;
				background: #f0f6fc;
				color: #2684ff;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
				border-radius: 10upx;
			}
		}


	}
	.pos-button{
		width: 100%;
		display: flex;
		justify-content: space-around;
		border-top:1px solid #e8e8e8 ;
		margin-top: 20upx;
		.pos-button-cancel{
			width: 50%;
			color:  #2684ff;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
		}
		.pos-button-confirm{
			width: 50%;
			background: #2684ff;
			color: white;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
		}
	}
	.area-page{
		position: absolute;
		z-index: 50;
		width: 100%;
		// height: 100%;
		top: 0;
		left: 0;
		background: white;
	}
	.server-page{
		position: absolute;
		z-index: 50;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: white;
	}
	.product-page{
		position: absolute;
		z-index: 50;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: white;
	}
</style>
